<template>
  <div class="monitoring">
    <!-- 标题（看护区变动） -->
    <div class="title">{{ msg }}</div>
    <div class="list">
      <!-- 监控列表 -->
      <ul>
        <li v-for="item in data" :key="item.Id" @click="changeId(item)">监控：{{item.Id}}</li>
      </ul>
      <!-- 监控显示区域 -->
      <div class="video">
        <video :src="videoSrc" height="300" width="400" controls="controls" webkit-playsinline="false" :autoplay="istrue" preload="no">
        </video>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "monitoring",
  data() {
    return {
      msg: "看护区变动",
      data: [],
      videoSrc: "",
      istrue: false
    };
  },
  mounted() {},
  created() {
    var that = this;
    // 请求监控的url,
    var url = api + "/api/Warehouse/GetMonitors";
    $.ajax({
      type: "GET",
      url: url,
      dataType: "json",
      /*  xhrFields: {
          withCredentials: true
       },
       crossDomain: true, */
      data: {
       token:JSON.parse(localStorage.getItem("token"))
      },
      success: function(result) {
        console.log("视频监控：：", result);
       if(result.state == -1){
            alert(result.message)
           _that.$router.push("/login");
          }else{
 // 请求成功成功显示监控列表
        that.data = result;
          }
       
      },
      error: function(error) {
        // 请求失败提示信息
        alert("系统异常");
      }
    });
  },
  methods: {
    // 点击切换不同的监控点
    changeId(item) {
      // 测试点击事件是否触发
      var that = this;
      //  更新视频地址
      that.videoSrc = item.Address;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.monitoring {
  width: 100%;
  height: 100%;
  .list {
    ul {
      white-space: nowrap;
      overflow-x: scroll;
      margin-bottom: 10px;
      ::-webkit-scrollbar-track {
        background-color: #fff;
      }
      li {
        cursor: pointer;
        padding: 5px;
        margin: 0 5px;
        display: inline-block;
        background: rgb(89, 211, 233);
        border-radius: 10%;
      }
    }
  }
  .video {
    padding: 10px;
    text-align: center;
  }
}
</style>
